<template lang="html">
    <div class="bg">
        <div class="detail-container" ref="box" :style="{'height':boxh+'px','width':boxw+'px'}">
            <div v-if="isStatic" v-html="lists"></div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'faciDetail',
  created () {      
      this.getContent();
      this.clientHeight = `${document.documentElement.clientHeight}`;
      this.clientWidth=`${document.documentElement.clientWidth}`;  
      this.boxh=this.clientHeight ;
      this.boxw=this.clientWidth;      
  },
  methods: {
    getContent () {
      this.actID = this.$route.query.id;
      axios.post('https://vip.gznewpark.com/dist/admin/public/index.php/wx/Shop/serviceList').then(res => {
        this.contentList = res.data.result
        const index = this.contentList.findIndex(item => item.id === this.actID)
        // this.title = this.contentList[index].title
        this.lists = this.contentList[index].content        
        this.url = this.contentList[index].url
        const isUrl = this.contentList[index].is_url
        if (isUrl == 0) {
            this.isStatic = true
        } else {
        window.location.href = this.url;
        window.history.pushState('', '', '#')
        window.addEventListener('popstate',function(e){
            window.location.replace('/serFaci')
        })
        }
      })
    }
  },
  data () {
    return {
      isStatic:false,
      actID: Number,
      contentList: [],
      lists:[],
      title: '',
      clientHeight:'',
      clientWidth:'',
      boxh:'',
      boxw:''
    }
  }
}
</script>

<style>
.bg{
    width: 100%;
    height: 100%;
    background: url("../../static/bg.png") no-repeat center center; 
    background-size: cover;
    background-attachment: fixed;
    overflow: auto;
    box-sizing: border-box;
    padding:0px!important;
}
.detail-container{  
    box-sizing: border-box;  
    padding: 0px!important;
    width: 100%;
    height: 100%;
    overflow-y: scroll;    
}
.detail-container ul{
    width: 100%!important;
}
.detail-container img{
    width: 100%;
    height: auto;
}
</style>
